<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <el-form :inline="true" :model="queryParams" class="demo-form-inline">
        <el-form-item label="手机号">
          <el-input
            v-model="queryParams.phone"
            placeholder="手机号"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="手机号">
          <el-date-picker
            v-model="dateArr"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="loadUsers">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table :data="queryResult.records" border style="width: 100%">
      <el-table-column prop="id" label="用户ID" align="center">
      </el-table-column>
      <el-table-column label="头像" align="center" v-slot="scope">
        <el-avatar :src="scope.row.portrait || defaultFace"></el-avatar>
      </el-table-column>
      <el-table-column prop="name" label="用户名" align="center">
      </el-table-column>
      <el-table-column prop="phone" label="手机号" align="center">
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="注册时间"
        :formatter="timeFormater"
        align="center"
      >
      </el-table-column>
      <el-table-column label="状态" align="center" v-slot="scope">
        <el-switch
          v-model="scope.row.status"
          active-color="#13ce66"
          inactive-color="#ff4949"
          active-value="ENABLE"
          inactive-value="DISABLE"
          active-text="启用"
          inactive-text="禁用"
          @change="handleChangeStatus(scope.row)"
        >
        </el-switch>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template v-slot="scope">
          <el-button size="mini" @click="handleAllocRole(scope.row)"
            >分配角色</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="queryParams.page"
      :page-sizes="[5, 20, 30, 50]"
      :page-size="queryParams.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="queryResult.total"
    >
    </el-pagination>
    <alloc-role-dlg ref="allocRoleDlg"></alloc-role-dlg>
  </el-card>
</template>
<script>
import { queryUsers, enableUser, forbidUser } from '@/api/user'
import AllocRoleDlg from './components/alloc-role.vue'
import dayjs from 'dayjs'

export default {
  name: 'UserIndex',
  components: { AllocRoleDlg },
  data () {
    return {
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      },
      dateArr: [],
      defaultFace:
        'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
      queryParams: {
        currentPage: 1,
        pageSize: 5,
        phone: '',
        userId: '',
        startCreateTime: '',
        endCreateTime: ''
      },
      queryResult: {}
    }
  },
  watch: {
    dateArr: {
      deep: true,
      handler (newVal) {
        this.queryParams.startCreateTime = newVal[0]
        this.queryParams.endCreateTime = newVal[1]
      }
    }
  },
  created () {
    this.loadUsers()
  },
  methods: {
    handleAllocRole (user) {
      this.$refs.allocRoleDlg.showAndInit(user)
    },
    handleChangeStatus (user) {
      (user.status === 'ENABLE' ? enableUser(user.id) : forbidUser(user.id))
        .then(() => {
          this.$message.success('操作成功')
        })
        .catch(() => {
          this.$message.error('操作失败')
        })
    },
    timeFormater (row, column, value, index) {
      return dayjs(value).format('YYYY-MM-DD')
    },
    loadUsers () {
      queryUsers(this.queryParams).then((res) => {
        if (res.data.code === '000000') {
          const {
            current: currentPage,
            pages,
            records,
            size: pageSize,
            total
          } = res.data.data
          Object.assign(this.queryParams, { currentPage, pageSize })
          this.queryResult = { pages, records, total }
        } else {
          this.$message.error('获取失败')
        }
      })
    },
    handleSizeChange (val) {
      this.queryParams.pageSize = val
      this.loadUsers()
    },
    handleCurrentChange (val) {
      this.queryParams.currentPage = val
      this.loadUsers()
    }
  }
}
</script>
